<template>
	<view class="content">
		<view class="uni-list">
			<view class="car_box">
				<view class="tip">故障区域</view>
				<view class="uni-flex">
					<view class="kaung" @click="pickerShow('1')">{{ area.label }}</view>
				</view>
				<view class="tip">故障地址</view>
				<view class="kaung"><input type="text" v-model="fjh" placeholder="请输入详细地址,如门牌号" /></view>
				<view class="tip">报修设施</view>
				<view class="uni-flex">
					<view class="kaung" @click="pickerShow('3')">{{ goods.label }}</view>
				</view>
				<view class="tip">故障描述</view>
				<view class="kaung"><input type="text" v-model="ms" placeholder="请输入描述" /></view>
				<view class="tip">联系电话</view>
				<view class="kaung"><input type="number" v-model="dh" placeholder="请输入号码" /></view>
				<view class="tip">
					图片
					<text style="color:#8f8f94;">（至少一张 问题图片）{{ imageList.length }}/3</text>
				</view>
				<view class="feedback-body feedback-uploader">
					<view class="uni-uploader">
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image, index) in imageList" :key="index">
									<view class="uni-uploader__file" style="position: relative;">
										<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
										<view class="close-view" @click="close(index)">x</view>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-show="imageList.length < 3"><view class="uni-uploader__input" @tap="chooseImg"></view></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tip">
				无人维修
				<text style="color:#8f8f94;">（房间无人时进行维修）</text>
			</view>
			<view class="kaung">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="1" checked="true" />
						同意
					</label>
					<label class="radio">
						<radio value="0" />
						不同意
					</label>
				</radio-group>
			</view>
		</view>
		<mpvue-picker ref="mpvuePicker" @onConfirm="onConfirm" :pickerValueArray="pickerValueArray" :pickerValueDefault="pickerValueDefault" :mode="mode"></mpvue-picker>
		<view class="btn"><button type="primary" @tap="send()">发送</button></view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
export default {
	computed: mapState(['TOKEN', 'URL']),
	components: {
		mpvuePicker
	},
	data() {
		return {
			fjh: '',
			ms: '',
			dh: '',
			imageList: [],
			radio: '1',
			pickerValueArray: [],
			pickerValueDefault: [0, 0],
			mode: 'multiLinkageSelector',
			selcIndex: 0,
			area: {
				index: [0, 0],
				label: '请选择故障区域和楼宇',
				value: ['w', '201d2a964c4411e9b07600163e0c01db']
			},
			goods: {
				index: [0, 0],
				label: '请选择故障设施',
				value: ['w', '201d2a964c4411e9b07600163e0c01db']
			},
			areaData: [],
			goodsData: []
		};
	},
	onLoad() {
		this.repair('1');
		this.repair('3');
	},
	methods: {
		radioChange(e) {
			console.log(e.detail);
			this.radio = e.detail.value;
		},
		pickerShow(res) {
			if (res === '1') {
				this.pickerValueArray = this.areaData;
				this.selcIndex = 0;
				this.pickerValueDefault = this.area.index;
			} else if (res === '3') {
				this.pickerValueArray = this.goodsData;
				this.selcIndex = 1;
				this.pickerValueDefault = this.goods.index;
			}
			this.$refs.mpvuePicker.show();
		},
		repair(classType) {
			uni.request({
				method: 'POST',
				url: this.URL + 'dict/getDictTreeList',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					dicType: classType
				},
				success: res => {
					// console.log(res.data);
					let newData = res.data.data;
					if (classType === '1') {
						this.areaData = newData;
					} else if (classType === '3') {
						this.goodsData = newData;
					}
				}
			});
		},
		...mapMutations(['SIGN_OUT', 'TO_UPDATE']),
		onConfirm(e) {
			console.log(e);
			if (this.selcIndex === 0) {
				this.area = e;
			} else if (this.selcIndex === 1) {
				this.goods = e;
			}
		},

		send() {
			console.log();

			if (!this.ms || !this.fjh || !this.dh) {
				uni.showToast({
					icon: 'none',
					title: '信息有漏填'
				});
				return;
			}
			if (this.goods.label.substr(0, 3) === '请选择') {
				uni.showToast({
					icon: 'none',
					title: '选项漏选'
				});
				return;
			}
			if (this.area.label.substr(0, 3) === '请选择') {
				uni.showToast({
					icon: 'none',
					title: '选项漏选'
				});
				return;
			}
			if (this.imageList.length === 0) {
				uni.showToast({
					icon: 'none',
					title: '请上传图片'
				});
				return;
			}
			uni.showLoading({
				title: '发送中'
			});
			const data = {
				// bxArea: this.area.value[0],
				// bxBuild: this.area.value[1],
				//bxBtype: this.goods.value[0],
				//bxStype: this.goods.value[1],
				// bxRoomnum: this.fjh,
				bxAreaName: this.area.label,
				bxAddr: this.fjh,
				bxItemName: this.goods.label,
				bxAreaId :this.area.value[0] + '/' + this.area.value[1],
				bxItemId  : this.goods.value[0] + '/' + this.goods.value[1],

				bxContent: this.ms,
				userPhone: this.dh,
				isNopeople :this.radio
			};
			let imgs = this.imageList.map((value, index) => {
				return {
					name: 'bxImg_' + index,
					uri: value
				};
			});
			console.log(JSON.stringify(imgs));
			console.log(JSON.stringify(data));
			uni.uploadFile({
				method: 'POST',
				header: {
					token: this.TOKEN
				},
				files: imgs,
				url: this.URL + 'bx/addBx',
				formData: data,
				success: res => {
					let resData = JSON.parse(res.data);
					if (resData.success) {
						this.TO_UPDATE(true);
						uni.showToast({
							title: '报修成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					} else {
						this.SIGN_OUT();
// 						uni.removeStorage({
// 							key: 'TOKEN'
// 						});
// 						uni.removeStorage({
// 							key: 'USER_INFO'
// 						});
						uni.showToast({
							icon: 'none',
							title: '账号验证失效，请重新登录'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					}
				}
			});
		},
		chooseImg() {
			//选择图片
			uni.chooseImage({
				sourceType: ['camera', 'album'],
				count: 3 - this.imageList.length,
				success: res => {
					this.imageList = this.imageList.concat(res.tempFilePaths);
				}
			});
		},
		previewImage() {
			//预览图片
			uni.previewImage({
				urls: this.imageList
			});
		},
		close(e) {
			this.imageList.splice(e, 1);
		}
	}
};
</script>

<style>
.uni-list {
	border-radius: 10upx;
}
.uni-list::before {
	background: none;
}
.tip {
	height: 80upx;
	line-height: 80upx;
	/* background: #EFEFF4; */
	text-indent: 2em;
}
.kaung {
	text-align: center;
	height: 80upx;
	line-height: 80upx;
	background: #d8d8d8;
	flex: 1;
}
.uni-input {
	background: #d8d8d8;
}
.kaung input {
	height: 100%;
}
.btn {
	margin-top: 40upx;
	background: white;
}

.input-view {
	font-size: 28upx;
}
.uni-uploader__file,
.uni-uploader__input-box {
	width: 30%;
}
.close-view {
	text-align: center;
	line-height: 14px;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #ff5053;
	color: #ffffff;
	position: absolute;
	top: -6px;
	right: -4px;
	font-size: 12px;
}
</style>
